<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:b="http://bootsfaces.net/ui">

<h:head></h:head>
<h:body>
<h:form id="loginForm">
  <b:container layout="fluid">
    <b:panel title="login screen" look="primary">
      <b:row>
        <b:column medium-screen="2">
          <h:outputText value="Username:" for="username" />
        </b:column>
        <b:column medium-screen="4">
          <b:inputText placeholder="Username" id="username" value=""
                       ajax="true" autocomplete="false" update="@(.message)">
            <f:facet name="prepend">
              <b:icon name="user" />
            </f:facet>
          </b:inputText>
        </b:column>
        <b:column medium-screen="6" style-class="message">
          <b:message for="username" />
        </b:column>
      </b:row>
      <b:row tooltip="This password has fancy error messages.">
        <b:column medium-screen="2">
          <h:outputText value="Password:" />
        </b:column>
        <b:column medium-screen="4">
          <b:inputSecret placeholder="Password" id="password" value=""
                         ajax="true" autocomplete="false" update="@(.message)">
            <f:facet name="prepend">
              <b:iconAwesome name="key" />
            </f:facet>
          </b:inputSecret>
        </b:column>
        <b:column medium-screen="6" styleClass="message">
          <b:message for="password" />
        </b:column>
      </b:row>
      <b:row>
        <b:column span="2" offset="2">
          <b:commandButton value="login" onclick="ajax:loginBean.login()" update="@form" look="primary"
                           style="width:100%" />
        </b:column>
        <b:column span="2">
          <b:commandButton value="password forgotten" onclick="ajax:loginBean.forgotPassword()" update="@form"
                           look="danger" style="width:100%" />
        </b:column>
      </b:row>
    </b:panel>
  </b:container>
</h:form>
</h:body>
</html>